<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>前端模板</title>
    <link rel="stylesheet" href="${ctxPath}/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/admin.css">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 表格工具栏 -->
            <form class="layui-form toolbar">
                <div class="layui-form-item">
<!--                    <div class="layui-inline">-->
<!--                        <label class="layui-form-label">模板名称:</label>-->
<!--                        <div class="layui-input-inline">-->
<!--                            <input name="templateName" class="layui-input" placeholder="请输入模板名称"/>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="layui-inline">-->
<!--                        <label class="layui-form-label">作者:</label>-->
<!--                        <div class="layui-input-inline">-->
<!--                            <input name="author" class="layui-input" placeholder="请输入作者"/>-->
<!--                        </div>-->
<!--                    </div>-->
                    <div class="layui-inline">&emsp;
                        <button type="button" class="layui-btn layui-btn-primary" id="uploadTemplate">
                            <i class="layui-icon"></i>上传模板文件
                        </button>
                    </div>
                </div>
            </form>
            <div id="currentTableId" lay-filter="currentTableFilter"></div>
            <script type="text/html" id="currentTableBar">
                {{# if(d.status == 2){ }}
                <a class="layui-btn layui-btn-primary layui-btn-xs" perm-show="template:edit" lay-event="enable">启用</a>
                {{# }if(d.status == 1){ }}
                <a class="layui-btn layui-btn-primary layui-btn-xs" perm-show="template:edit" lay-event="enable" style="pointer-events:none;cursor: default;color:gray;">已启用</a>
                {{# }if(d.templateName !== 'default' && d.status !== "1"){ }}
                <a class="layui-btn layui-btn-danger layui-btn-xs" perm-show="template:delete" lay-event="delete">删除</a>
                {{# } }}
                <a class="layui-btn layui-btn-danger layui-btn-xs" perm-show="template:delete" lay-event="edit">编辑模板</a>
            </script>
        </div>
    </div>
</div>

<!-- js部分 -->
<script src="${ctxPath}/assets/libs/layui/layui.js"></script>
<script src="${ctxPath}/assets/js/common.js"></script>
<script>
    layui.config({
        base: getProjectUrl() + 'assets/module/' //配置 layui 第三方扩展组件存放的基础目录
    }).extend({
        cardTable: 'layui_exts/cardTable/cardTable'
    }).use(['upload','layer', 'table', 'tableX', 'notice', 'xnUtil', 'laydate','cardTable'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var tableX = layui.tableX;
        var admin = layui.admin;
        var form = layui.form;
        var notice = layui.notice;
        var xnUtil = layui.xnUtil;
        var laydate = layui.laydate;
        var upload = layui.upload;

        let cardTable = layui.cardTable;

        // 提示语
        var layer_tips = 0;

        $(document).on('mouseenter', '#uploadTemplate', function () {
            layer_tips = layer.tips('上传zip压缩包格式', '#uploadTemplate', {
                time: 0,
                tips: 1
            });
        }).on('mouseleave', '#uploadTemplate', function () {
            layer.close(layer_tips);
        });

        var currentTable = cardTable.render({
            elem: '#currentTableId',
            //此为动态
            url: getProjectUrl() + 'template/page',
            //此为静态
            limit: 12, //每页数量默认是每行数量的双倍
            linenum: 4, //每行数量 2,3,4,6
            toolbar:'currentTableBar'
        });

        //toolRow监听事件
        currentTable.on('tool(currentTableFilter)', function (obj) {

            /* 删除 */
            if (obj.event === 'delete') {
                layer.confirm('确定要操作该数据吗？', {
                    skin: 'layui-layer-admin',
                    shade: .1
                }, function () {
                    admin.req(getProjectUrl() + 'template/delete', JSON.stringify([{'id': obj.value.id}]), function(res){
                        layer.msg(res.message, {icon: 1, time: 1000}, function () {
                            cardTable.reload("currentTableId", {
                                where: null,
                            });
                        });
                    }, 'post');
                });
            }
            if(obj.event === 'enable'){
                layer.confirm('确定要启用该模板吗？', {
                    skin: 'layui-layer-admin',
                    shade: .1
                }, function () {
                    admin.req(getProjectUrl() + 'enableTemplate/'+obj.value.id+"/1",null, function(res){
                        layer.msg(res.message, {icon: 1, time: 1000}, function () {
                            cardTable.reload("currentTableId", {
                                where: null,
                            });
                        });
                    }, 'get');
                });
            }
            if(obj.event === 'edit'){
                window.location.href = getProjectUrl() + 'editTemplate/'+obj.value.id;
            }
        });

        /* 表格搜索 */
        // form.on('submit(tableSearch)', function (data) {
        //     cardTable.reload({
        //         where: data.field,
        //     });
        // });

        upload.render({ //允许上传的文件后缀
            elem: '#uploadTemplate'
            ,url: getProjectUrl() + 'uploadTemplate' //此处配置你自己的上传接口即可
            ,accept: 'file' //普通文件
            ,exts: 'zip|rar|7z' //只允许上传压缩文件
            ,done: function(res){
                layer.msg(res.message, {icon: 1, time: 1000});
                currentTable.reload();
            }
        });

    });
</script>
</body>
</html>
